<template>
  {{model}}
  <VueDraggable v-model="model" :animation="150" group="people" ghostClass="ghost"
    class="grid grid-cols-24 gap-2 p-4 bg-gray-500/5 rounded overflow-auto w-full min-h-[150px] ">
    <div v-if="model.length > 0" v-for="item in model" :key="item.id" @click="checkHandle(item)" :class="['relative flex cursor-move bg-gray-500/5 rounded p-3', {
        'border-2 border-solid border-[#3370FF] shadow-md': checkDataId === item.id,
        'hover:border-1 hover:border-solid hover:border-[#3370FF]': checkDataId !== item.id,
      }]" :style="{'grid-column': `span ${item.layout.span}`}">
      <FormItem :allData="allData" :itemStyle="{width: '100%'}" :itemData="item" :allDisabled="true" :value="{}">
      </FormItem>
      <div class="absolute right-0 bottom-0" v-if="checkDataId === item.id">
        <el-button type="primary" size="small" @click.stop="copyHandle(item)">复制</el-button>
        <el-button type="primary" size="small" @click.stop="deleteHandle(item)">删除</el-button>
      </div>
    </div>
  </VueDraggable>
</template>
<script setup lang='ts'>
import { VueDraggable } from 'vue-draggable-plus'
import FormItem from '@/SBaseComponent/BaseForm/src/FormItem.vue'

interface propMsg {
  checkDataId: string | null
}
const emit = defineEmits([
  'checkHandle',
  'deleteHandle',
  'copyHandle',
  'update:modelValue',
])
const props = withDefaults(defineProps<propMsg>(), {})
const { checkDataId } = toRefs(props)

const allData = reactive<any>({
  allRefs: {},
  allFormItemRefs: {},
  allEvent: {},
  allChangeData: {}
})
const model = defineModel<any[]>({ type: Array, default: () => [] })
function checkHandle(item: Record<string, any>) {
  emit('checkHandle', item)
}
function deleteHandle(item: Record<string, any>) {
  emit('deleteHandle', item)
}
function copyHandle(item: Record<string, any>) {
  emit('copyHandle', item)
}
</script>
<style scoped lang='scss'>
:deep(.el-form-item) {
  align-items: center;
}
</style>